<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>圆环图（环中显示）</title>
	<script src="../static/js/echarts.js"></script>
	<!-- <script src="../static/js/echarts.min.js"></script> -->
</head>
<body>
	<div id="main" style="width: 600px;height:400px;"></div>
</body>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

/* 
上面的例子展现了在圆环图中间显示固定文字的例子，下面我们要介绍，如何在圆环图中间显示鼠标高亮的扇形对应的文字。
实现这一效果的思路是，利用系列的 label（默认用扇形颜色显示数据的 name），显示在圆环图中间。在默认情况下不显示系列的 label，在高亮时显示。

avoidLabelOverlap 是用来控制是否由 ECharts 调整标签位置以实现防止标签重叠。它的默认值是 true，而在这里，我们不希望标签位置调整到不是中间的位置，因此我们需要将其设为 false。
*/

// 指定图表的配置项和数据
var option = {
	tooltip: {},
	legend: {
		orient: 'vertical',
		x: 'left',
		data: ['A', 'B', 'C', 'D', 'E']
	},
	series: [
		{
			type: 'pie',
			radius: ['50%', '70%'],
			avoidLabelOverlap: false,
			label: {
				show: false,
				position: 'center'
			},
			labelLine: {
				show: false
			},
			emphasis: {
				label: {
					show: true,
					fontSize: '30',
					fontWeight: 'bold'
				}
			},
			data: [
				{ value: 335, name: 'A' },
				{ value: 310, name: 'B' },
				{ value: 234, name: 'C' },
				{ value: 135, name: 'D' },
				{ value: 1548, name: 'E' }
			]
		}
	]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</html>
